<template>
    <el-dialog :model-value="dialogVisible" title="订单详情" width="800" high="800" :before-close="handleClose">
        <span>
            <el-form :model="rowForm" label-width="100px">
                <el-form-item label="报修时间">
                    <el-date-picker v-model="rowForm.date" type="date" :size="size" />
                </el-form-item>
                <el-form-item label="报修人姓名">
                    <el-input v-model="rowForm.name"></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="rowForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="任务描述">
                    <el-input v-model="rowForm.description"></el-input>
                </el-form-item>
                <el-form-item label="地点">
                    <el-input v-model="rowForm.position"></el-input>
                </el-form-item>
                <el-form-item label="任务状态">
                    <el-input v-model="rowForm.state" disabled></el-input>
                </el-form-item>
                <el-form-item label="评价">
                    <el-input v-model="rowForm.comment"></el-input>
                </el-form-item>
            </el-form>
        </span>
        <div style="text-align: right; margin-top: 20px;">
            <el-button type="primary" @click="comitForm">
                提交
            </el-button>
            <el-button @click="dialogVisible = false">
                取消
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
import api from '@/api/axiosConfig';
import { ElMessage } from 'element-plus';

export default {
    data() {
        return {
            dialogVisible: false,
            rowForm: {
            },
        };
    },
    methods: {
        handleClose() {
            this.dialogVisible = false;
        },
        setRow(row) {
            this.dialogVisible = true;
            this.rowForm = { ...row };
        },
        comitForm() {
            const { name, phone, date, description, position } = this.rowForm;
            if (!name || !phone || !date || !description || !position) {
                ElMessage.error('请填写完整信息');
                return;
            }
            const data = {
                num: this.rowForm.num,
                name,
                phone,
                date,
                description,
                position,
                comment: this.rowForm.comment,
            };
            api.put('/task/page',
                data,
                {
                    headers: {
                        'Authorization': `Bearer ${this.$store.getters['token/getToken']}`
                    }
                }
            ).then(res => {
                console.log(res);
                this.$emit('alrer-task-success');
                ElMessage({
                    message: '提交成功',
                    type: 'info',
                })
                this.dialogVisible = false;
            }).catch(err => {
                console.log(err);
                ElMessage({
                    message: '提交失败',
                    type: 'warning',
                })
            });
        },
    },
};    
</script>